<template>
  <!-- 底部组件 -->
  <footer>
    <a
      href="##"
      v-for="(item, index) in nav"
      :class="index === activeIndex ? 'active' : ''"
      :key="item.id"
      @click="getActive(index, item.path)"
    >
      <div>
        <div class="img">
          <img v-if="index === activeIndex" :src="item.imgActive" alt="" />
          <img v-else :src="item.img" alt="" />
        </div>
        <span>{{ item.name }}</span>
      </div>
    </a>
  </footer>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: window.index ? window.index : 0,
      nav: [
        {
          id: 1,
          img: require('../assets/img/main-nav1.png'),
          imgActive: require('../assets/img/main-nav1-active.png'),
          name: '首页',
          path: '/index',
        },
        {
          id: 2,
          img: require('../assets/img/main-nav2.png'),
          imgActive: require('..//assets/img/main-nav2-active.png'),
          name: '分类',
          path: '/category',
        },
        {
          id: 3,
          img: require('../assets/img/main-nav3.png'),
          imgActive: require('../assets/img/main-nav3-active.png'),
          name: '发现',
          path: '/discovery',
        },
        {
          id: 4,
          img: require('../assets/img/main-nav4.png'),
          imgActive: require('../assets/img/main-nav4-active.png'),
          name: '学习',
          path: '/study',
        },
        {
          id: 5,
          img: require('../assets/img/main-nav5.png'),
          imgActive: require('../assets/img/main-nav5-active.png'),
          name: '我的',
          path: '/my',
        },
      ],
    }
  },
  props: ['index1'],
  components: {},
  methods: {
    //切换路由
    getActive(index, path) {
      window.index = index
      this.activeIndex = window.index
      this.$router.push(path)
    },
    //从父组件传过来的当前页面激活tab
    getRouter() {
      this.activeIndex = this.index1
    },
  },
  mounted() {
    this.getRouter()
  },
}
</script>
<style scoped lang="less">
footer {
  padding: 0.12rem 0;
  background: #fff;
  position: fixed;
  bottom: 0;
  font-size: 0.24rem;
  width: 100%;
  .active {
    color: #fd5252;
  }
  display: flex;
  a {
    flex: 1;
    display: flex;
    justify-content: center;
    & > div {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      .img {
        width: 100%;
        img {
          width: 30%;
        }
      }
    }
  }
}
</style>
